<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.pics {
				width: 550px;
				margin: 0 auto;
			}

			/*整体居中*/
			ul {
				list-style: none;
				display: flex;
			}

			/*ul中内容，水平对齐*/
			li {
				height: 230px;
			}

			button {
				width: 40px;
				height: 230px;
				font-size: 32px;
			}

			.count,
			.title {
				position: absolute;
				width: 380px;
				background: rgba(0, 0, 0, .5);
				text-align: center;
				line-height: 40px;
				color: #fff;
			}/*黑色条*/

			.title {
				top: 190px;
			}
		</style>
	</head>
	<body>
		<div class="pics">
			<ul>
				<li><button type="button">&lt;</button></li>
				<li>
					<div class="count">1/4</div>
					<div class="title">我是标题</div>
					<img src="img/1.jpg">
				</li>
				<li><button type="button">&gt;</button></li>
			</ul>

		</div>
		
		
		<script type="text/javascript">
			//let 声明变量
			let imgs=document.querySelector('img')
			let btns=document.querySelectorAll('button');
			let count=document.querySelector('.count')
			let title=document.querySelector('.title')
			let imgurls=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']
			let titles=['第一张图片','第二张图片','第三张图片','第四张图片']
			
			let num=0;
			play();
			
			
			btns[0].onclick=()=>{
				num--;
				if(num<0){
					num=0;
				}else{
					play()
				}
			}
			btns[1].onclick=()=>{
				num++;
				if(num>3){
					num=3;
				}else{
					play()
				}
			}
			
			function play (){
				count.innerHTML=(num+1)+'/'+imgurls.length;
				title.innerHTML=titles[num];
				imgs.src=imgurls[num]
			}
			// ()=>{} 箭头函数用来替代匿名函数。参数如果只有一个小括号可以省略，
			//如果没有参数，或者多个必须写
			// 如果只有一句执行语句，大括号可以不写
			//执行语句是return return关键字可以不写
		</script>
	</body>
</html>
